<template>
  <div class="box">
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
    >
      <div v-if="addShow" class="car-icon"></div>
    </transition>
  </div>
</template>
<script>
import Bus from "@/utils/bus.js";
export default {
  name: "",
  data() {
    return {
      addShow: false, //一开始加入资源车图标隐藏
      startTop: 0, //一开始加入资源车的显示的位置
      startLeft: 0,
    };
  },
  mounted() {
    Bus.$on("carAnimate", () => {
      setTimeout(() => {
        this.joinHandle();
      }, 100);
    });
  },
  beforeDestroy() {
    Bus.$off("carAnimate");
  },
  methods: {
    joinHandle() {
      let joinBtn = document.getElementById("shoppingCar");
      //获取当前点击的位置 也就是一开始加入资源车动画开始的位置
      if (joinBtn) {
        this.startTop = parseInt(joinBtn.getBoundingClientRect().top);
        this.startLeft = parseInt(joinBtn.getBoundingClientRect().left);
      } else {
        let e = this.$store.state.webBasicInfo._event;
        this.startTop = e.y;
        this.startLeft = e.x;
        if (!e) return;
      }
      this.addShow = true; //加入资源车图标显示
    },
    // 动画钩子函数
    // 进入前的状态
    beforeEnter(el) {
      el.style.left = this.startLeft + "px";
      el.style.top = this.startTop + "px";
      el.style.transform = "scale(1)";
    },
    // 进入中
    enter(el) {
      // 需要调用元素的offset操作，才有过渡效果，否则会马上执行
      el.offsetWidth;
      // 资源车的位置
      let joinBtn = document.getElementById("resourceCar");
      let sizeTop = parseInt(joinBtn.getBoundingClientRect().top) + 10;
      let sizeLeft = parseInt(joinBtn.getBoundingClientRect().left) + 25;
      el.style.top = sizeTop + "px";
      el.style.left = sizeLeft + "px";
      el.style.transform = "scale(0.5)";
      //   done();
    },
    // 进入后
    afterEnter() {
      this.addShow = false;
    },
  },
};
</script>
 
<style scoped>
.car-icon {
  position: fixed;
  left: 0;
  top: 0;
  transition: all 1s;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 50%;
  color: #930b0b;
  /* font-size: 20px; */
  z-index: 99;
}
</style>